<template>
    <div class="video-play">
        <Layout>
            <Header class="header">
                <Row>
                    <Col :span="20">
                        <div>
                            <span class="border-left"></span>
                            视频播放
                        </div>
                    </Col>
                    <Col :span="4">
                        <div class="back">
                            <span class="back-btn" @click="back">
                                <Icon type="ios-arrow-back" />
                                返回
                            </span>
                        </div>
                    </Col>
                </Row>
            </Header>
            <Content class="content">
                <div class="video-title">
                    当前播放《{{name}}》
                </div>
                <div class="video-box" v-if="videoTrue">
                    <video-player  class="video-player vjs-custom-skin"
                        ref="videoPlayer"
                        :playsinline="true"
                        :options="playerOptions">
                    </video-player>
                </div>
                <div class="btn-box">
                    <!-- <Button type="primary" class="btn">上一个视频</Button> -->
                    <Button type="primary" class="btn" @click="up" :disabled="upState === 2">{{upState === 1 ? '上一个' : '没有更多了'}}</Button>
                    <Button type="primary" class="btn" @click="pass" v-if="state !== '1'">通过</Button>
                    <Button type="primary" class="btn" disabled v-else>已通过</Button>
                    <Button type="primary" class="btn" @click="rejected" v-if="state !== '2'">驳回</Button>
                    <Button type="primary" class="btn" disabled v-else>已驳回</Button>
                    <Button type="primary" class="btn" @click="next" :disabled="nextState === 2">{{nextState === 1 ? '下一个' : '没有更多了'}}</Button>
                </div>
            </Content>
            <Footer>
                <p class="copy-right">Copyright © {{host}}, All Rights Reserved.</p>
            </Footer>
        </Layout>
    </div>
</template>
i
<script>
    // import video from '../../assets/video/video.mp4';
    // import videoImg from '../../assets/img/video.png'
    import * as api from "@/api/api";
    export default {
        data(){
            return {
                host: window.location.host,
                loading: this.$store.state,
                data: null,
                name: '',
                id: null,
                listId: null,
                state: null,
                videoTrue: false,
                total: null,
                pageSize: null,
                current_page: null,
                nextState: 1,
                upState: 1,
                playerOptions : {
                    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度。
                    autoplay: true, //如果true,浏览器准备好时开始回放。
                    muted: false, // 默认情况下将会消除任何音频。
                    loop: true, // 导致视频一结束就重新开始。
                    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    language: 'zh-CN',
                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources: [{
                        type: "",
                        // type: "video/webm",
                        // type: "video/mp4",
                        // type: "video/avi",
                        src: '' //url地址
                        // src: 'http://127.0.0.1/video_02.mp4'
                    }],
                    // poster: videoImg, //你的封面地址
                    // width: document.documentElement.clientWidth,
                    notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    controlBar: {
                        timeDivider: true,
                        durationDisplay: true,
                        remainingTimeDisplay: false,
                        fullscreenToggle: true  //全屏按钮
                    }
                },
                videoArr: [],
            }
        },
        mounted(){
           
        },

        created() {
            this.getListId();
        },

        computed: {

        },

        watch: {
            
        },
        
        methods: {
            back() {
                this.$router.back();
            },
            getListId() {
                if(!this.$route.params.listId && this.$route.params.listId !== 0) {
                    this.$router.push({name:'VideoList'});
                    return false;
                }
                this.videoArr = this.$route.params.tableData;
                this.listId = this.$route.params.listId;
                this.total = this.$route.params.total;
                this.pageSize = this.$route.params.pageSize;
                this.current_page = this.$route.params.current_page;
                this.getVideoInfo();
            },

            getVideoInfo() {
                this.data = this.videoArr[this.listId];
                this.name = this.data.video_name;
                this.id = this.data.id;
                this.state = this.data.status;
                let reg = /http/;
                if(reg.test(this.data.video_url)) {
                    this.playerOptions.sources[0].src = this.data.video_url;
                }else {
                    this.playerOptions.sources[0].src = 'http://renli.oss-cn-shenzhen.aliyuncs.com/' + this.data.video_url;
                }
                this.videoTrue = true;
            },

            pass() {
                let id = this.id;
                this.$confirm('你确定通过该视频吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let body = {
                        model: "Videos",
                        data: {
                            status: 1
                        },
                        update_condition: {
                            id: id
                        }
                    };
                    this.loading.isLoading = true;
                    api.createData(body).then(res => {
                        if(res.data.code === 200) {
                            this.getVideoList();
                            this.$Message.success('操作成功');
                            this.next();
                        }else {
                            this.loading.isLoading = false;
                            this.$Notice.error({
                                title: '错误',
                                desc: res.data.msg
                            });
                        }
                    }).catch(err => {
                        this.loading.isLoading = false;
                        this.$Notice.error({
                            title: '错误',
                            desc: '服务器错误,请联系管理员（' + err + '）',
                        });
                    });
                })
            },

            rejected() {
                let id = this.id;
                let body = {
                        model: "Videos",
                        data: {
                            status: 2
                        },
                        update_condition: {
                            id: id
                        }
                    };
                    this.loading.isLoading = true;
                    api.createData(body).then(res => {
                        if(res.data.code === 200) {
                            this.getVideoList();
                            this.$Message.success('操作成功');
                            this.next();
                        }else {
                            this.loading.isLoading = false;
                            this.$Notice.error({
                                title: '错误',
                                desc: res.data.msg
                            });
                        }
                    }).catch(err => {
                        this.loading.isLoading = false;
                        this.$Notice.error({
                            title: '错误',
                            desc: '服务器错误,请联系管理员（' + err + '）',
                        });
                    });
            },

            next() {
                this.listId += 1;
                if(this.listId > this.videoArr.length - 1) {
                    this.current_page += 1;
                    if((this.current_page - 1) * this.pageSize > this.total) {
                        this.nextState = 2;
                        this.listId -= 1;
                        this.current_page -= 1;
                        return false;
                    }
                    this.listId = 0;
                    this.getVideoList();
                    this.upState = 1;
                }else {
                    this.getVideoInfo();
                    this.upState = 1;
                }
            },

            up() {
                this.listId -= 1;
                if(this.listId < 0) {
                    this.current_page -= 1;
                    if(this.current_page < 1) {
                        this.upState = 2;
                        this.listId += 1;
                        this.current_page += 1;
                        return false;
                    }
                    this.listId = this.pageSize - 1;
                    this.getVideoList();
                    this.nextState = 1;
                }else {
                    this.getVideoInfo();
                    this.nextState = 1;
                }
            },

            getVideoList() {
                let body = {
                    model: 'Videos',
                    width: {},
                    offset: this.current_page - 1,
                    limit: this.pageSize,
                    search: this.searchForm,
                    condition: {
                        is_delete: 0
                    }
                };
                if (this.create_time_search) {
					body.condition.create_time = this.create_time_search
				}
                this.loading.isLoading = true;
                api.getDataList(body).then(res => {
                    if(res.data.code === 200) {
                        let tableData = res.data.data.data;
                        for (let i = 0; i < tableData.length; i++) {
                            tableData[i].listId = i;
                        }
                        this.videoArr = tableData;
                        this.loading.isLoading = false;
                        this.getVideoInfo();
                    }else {
                        this.loading.isLoading = false;
                        this.$Notice.error({
							title: '错误',
							desc: res.data.msg
						});
                    }
                }).catch(err => {
                    this.loading.isLoading = false;
					this.$Notice.error({
						title: '错误',
						desc: '服务器错误,请联系管理员（' + err + '）',
					});
                })
            },
        }  
    }
</script>


<style lang="less">
    @import '../../assets/styles/constant.less';
    .video-play{
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f5f7f9;
        .ivu-layout{
            min-height: 100%;
        }
        .header{
            font-size: 14px;
            line-height: 40px;
            height: 40px !important;
            color: #434343;
            padding: 0 50px;
            background-color: @background;
            border-bottom: 1px solid #ddd;
            .border-left {
                border-left: 5px solid @baseColor;
                margin-right: 4px;
            }
            .back{
                text-align: right;
                color: #999;
                .back-btn{
                    cursor: pointer;
                    background-color: #fff;
                    padding: 6px 10px;
                    border: 1px solid #ddd;
                }
            }
        }
        .content{
            width: 100%;
            min-height: 76%;
            padding: 20px 60px;
            .video-title{
                width: 60%;
                margin: auto;
                height: 40px;
                line-height: 40px;
                font-size: 16px;
                color: #333;
            }
            .video-box{
                width: 60%;
                height: 80%;
                margin: auto;
            }
            .btn-box {
                width: 60%;
                padding: 10px 0;
                margin-left: auto;
                margin-right: auto;
                display: flex;
                justify-content: flex-end;
                // background-color: #000;
                .btn {
                    margin-left: 20px;
                    &[disabled] {
                        background-color: #eee !important;
                        border: none !important;
                        color: #aaa !important;
                    }
                }
            }
        }
        .copy-right{
            text-align: center;
            color: #aaa;
            font-size: 12px;
        }
    }
</style>